<template>
	<view class="business">
		<view class="inputlist">
			<view class="left">
				<text class="hx">*</text>
				<text>商家名称</text>
			</view>
			<view class="right">
				<input type="text" :value="shop.shop_name" disabled>
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text class="hx"></text>
				<text>主营项目</text>
			</view>
			<view class="right">
				<input type="text" :value="shop.main_project" disabled>
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text class="hx">*</text>
				<text>联系方式</text>
			</view>
			<view class="right">
				<input type="number" :value="shop.phone" disabled>
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text class="hx">*</text>
				<text>引荐人</text>
			</view>
			<view class="right">
				<input type="text" :value="shop.recommend" disabled>
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text class="hx">*</text>
				<text>商家类型</text>
			</view>
			<view class="right" v-if="types == 'edit'">
				<picker mode="selector" :range="businessType" @change="businessChoose">
					<view class="picker_text">{{businessName}}</view>
				</picker>
			</view>
			<view class="right" v-else>
				<input type="text" class="picker_text" disabled :value="businessName">
			</view>
		</view>

		<view class="inputlist">
			<view class="left">
				<text class="hx">*</text>
				<text>详细地址</text>
			</view>
			<view class="right">
				<input type="text" :value="shop.shop_address" disabled>
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text class="hx"></text>
				<text>描述</text>
			</view>
			<view class="right">
				<input type="text" :value="shop.content" disabled>
			</view>
		</view>
		<view class="imgbox">
			<view class="title">
				商家图片：
			</view>
			<image :src="shop.img | getImg" mode="widthFix"></image>
		</view>

		<view class="btn" v-if="types == 'edit'">
			<button class="btn_sumbit" @click="ShopVerify(2)">驳回</button>
			<button class="btn_sumbit" @click="ShopVerify(1)">通过</button>
		</view>

	</view>


</template>

<script>
	import {
		ShopDetail,
		ShopVerify
	} from "@/api/user.js"
	var QQMapWX = require('@/common/libs/qqmap-wx-jssdk.js');
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				businessType: [],
				classlist: [],
				businessName: '',
				address: '',
				longitude: '',
				latitude: '',
				chooseLocationL: '',
				qqmapsdk: {},
				shop_name: '',
				shop_class: '', //商家分类id
				main_project: '',
				content: '',
				shop_address: '',
				imgs: '',
				phone: '',
				recommend: '',
				shop_area: '',
				address_name: '',
				isShow: 0,
				types: '',
				id: '',
				shop: '',
				shop_class_name: '',
			}
		},
		onLoad(e) {
			this.types = e.type
			this.id = e.id
			this.ShopDetail()
		},

		methods: {
			ShopDetail() {
				ShopDetail({
					id: this.id
				}).then(res => {
					console.log(res);
					this.shop = res.data.shop
					this.classlist = res.data.shop_class
					this.businessType = this.classlist.map((item) => {
						return item.name
					})
					let index = this.classlist.findIndex(item => item.id == this.shop.shop_class)
					this.businessName = this.classlist[index].name
					this.shop_class = this.classlist[index].id
				})
			},
			ShopVerify(type) {
				ShopVerify({
					type: type,
					shop_class: this.shop_class,
					id: this.shop.id
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
					if (res.status == 1) {
						setTimeout(() => {
							uni.navigateBack({

							})
						}, 1000)
					}
				})
			},

			businessChoose(e) {
				let i = e.detail.value
				// this.shop_class_id = this.classlist[i].id
				this.shop_class = this.classlist[i].id
				this.businessName = this.businessType[i]
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
	}

	.btn {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;

		.btn_sumbit {
			background: #ff3939;
			color: #fff;
			width: 40%;
			font-size: 14px;
			padding: 5px 0;
			box-sizing: border-box;
		}
	}

	.imgbox {
		font-size: 14px;
		padding: 10px;
		background-color: #fff;

		image {
			margin-top: 10px;
			width: 100px;
		}
	}

	.inputlist {
		background-color: #fff;
		display: flex;
		font-size: 14px;
		padding: 10px;
		border-bottom: 1px solid #eee;

		.left {
			width: 30%;
			display: flex;

			.hx {
				display: block;
				width: 5px;
				color: red;
				margin-right: 3px;
			}
		}

		.right {
			width: 70%;

			input {
				font-size: 14px;
				color: #000;
			}

			.inputColor {
				color: #ccc;
			}


		}
	}
</style>
